<template>
  <div class="good-item-container">
    <div class="flex-row font16 header p_b10">
      <van-image class="m_t5 merchant-head-img" round :src="merchant.bgUrls[0]||''" v-if="merchant.bgUrls"/>
      <van-image class="m_t5 merchant-head-img" round :src="merchant.bgUrls||''" v-else/>
      <div class="line30 p_x4">{{ merchant.name || '' }}></div>
    </div>
    <div class="flex-row main">
      <van-image
          :radius="10"
          class="flex flex-shrink illustration"
          :src="files.illustration?files.illustration[0]||'':''"/>
      <div class="flex-column flex1 p_l10">
        <div class=" name">{{ data.title || '' }}</div>
        <div class="flex-row flex-wrap p_y5 tags">
          <div class="item" v-if="data.typeCodeName&&data.typeCodeName.length">{{ data.typeCodeName }}</div>
        </div>
        <div class="flex-row justify-between foot">
          <div class="price">
            <span class="font12">¥</span>
            <span class="font22 p_x4">
              {{ data.minPriceYuan }}
            </span>
          </div>
          <van-button type="danger" size="small" round>立即查看</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "GoodItem",
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    files: {
      type: Object,
      default: () => {
        return {}
      }
    },
    merchant: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
})
</script>

<style lang="less" scoped>
.good-item-container {
  background-color: #fff;
  border-radius: 20px;
  padding: 10px;
  margin: 5px 0;

  .header {
    .merchant-head-img {
      width: 18px;
      height: 18px;
    }
  }

  .main {
    .illustration {
      width: 100px;
      height: 100px;
    }

    .tags {
      .item {
        //color: @primaryColor;
        //background-color: @primaryLightColor;
        background-color: #F6E3E2;
        color: #F9574F;
        margin: 5px;
        border-radius: 20px;
        font-size: 12px;
        line-height: 22px;
        height: 22px;
        padding: 0 8px;
      }
    }

    .foot {
      .price {
        color: #FA3C32;
      }
    }
  }
}
</style>
